<template>
  <div>
    <el-form ref="infoForm" label-width="220px" :model="infoForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="工号" prop="workNumber">
            <el-input v-model="infoForm.workNumber" class="el_inputW" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入职时间" prop="timeOfEntry">
            <el-date-picker v-model="infoForm.timeOfEntry" class="el_inputS" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="username">
            <el-input v-model="infoForm.username" class="el_inputW" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门" prop="departmentName">
            <el-input v-model="infoForm.departmentName" class="el_inputW" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="infoForm.mobile" class="el_inputW" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="聘用形式" prop="formOfEmployment">
            <el-select v-model="infoForm.formOfEmployment" class="el_inputW">
              <el-option v-for="item of employees.hireType" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="员工头像" prop="staffPhoto">
            <ImageUpload ref="staffPhoto" />
          </el-form-item></el-col>
      </el-row>
      <el-row style="margin-left: 250px">
        <el-button type="primary" size="small" :loading="saveLoading" @click="saveDetailInfo">保存更新</el-button>
        <el-button size="small" @click="$router.push({name: 'employees'})">返回</el-button>
      </el-row>
    </el-form>
    <el-form ref="userInfoForm" label-width="220px" :model="detailInfo">
      <p>基础信息</p>
      <el-form-item label="最高学历">
        <el-select v-model="detailInfo.theHighestDegreeOfEducation">
          <el-option v-for="item of employees.highestDegree" :key="item.id" :label="item.value" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="员工照片">
        <imageUpload ref="photo" :show="false" :limit-num="5" />
      </el-form-item>
      <el-form-item label="国家/地区">
        <el-select v-model="detailInfo.nationalArea">
          <el-option v-for="item of employees.isOverseas" :key="item.id" :label="item.value" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="护照号">
        <el-input v-model="detailInfo.passportNo" class="el_inputW" placeholder="请输入护照" />
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="detailInfo.idNumber" class="el_inputW" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="籍贯">
        <el-input v-model="detailInfo.nativePlace" class="el_inputW" placeholder="请输入籍贯" />
      </el-form-item>
      <el-form-item label="民族">
        <el-select v-model="detailInfo.nation">
          <el-option v-for="item of employees.nation" :key="item.id" :label="item.value" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="婚姻状况">
        <el-select v-model="detailInfo.maritalStatus">
          <el-option v-for="item of employees.maritaStatus" :key="item.id" :label="item.value" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="生日">
        <el-input v-model="detailInfo.birthday" class="el_inputW" placeholder="请输入生日(示例：0306)" type="number" oninput="if(value.length>4)value=value.slice(0,4)" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="detailInfo.age" class="el_inputW" placeholder="请输入年龄" type="number" oninput="if(value.length>3)value=value.slice(0,3)" />
      </el-form-item>
      <el-form-item label="星座">
        <el-select v-model="detailInfo.constellation">
          <el-option v-for="item of employees.constellation" :key="item.code" :value="item.code" :label="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="血型">
        <el-select v-model="detailInfo.bloodType">
          <el-option v-for="item of employees.bloodType" :key="item.id" :value="item.id" :label="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="户籍所在地">
        <el-input placeholder="请输入户籍所在地" class="el_inputW" />
      </el-form-item>
      <el-form-item label="政治面貌">
        <el-select v-model="detailInfo.politicalOutlook">
          <el-option v-for="item of employees.politicalOutlook" :key="item.id" :value="item.id" :label="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="入党时间">
        <el-date-picker v-model="detailInfo.timeToJoinTheParty" placeholder="请输入入党时间" class="el_inputW" />
      </el-form-item>
      <el-form-item label="存档机构">
        <el-input v-model="detailInfo.archivingOrganization" placeholder="请输入存档机构" class="el_inputW" />
      </el-form-item>
      <el-form-item label="子女状态">
        <el-input v-model="detailInfo.stateOfChildren" placeholder="请输入子女状态" class="el_inputW" />
      </el-form-item>
      <el-form-item label="子女有无商业险">
        <el-radio v-model="detailInfo.doChildrenHaveCommercialInsurance" label="1">有</el-radio>
        <el-radio v-model="detailInfo.doChildrenHaveCommercialInsurance" label="2">无</el-radio>
      </el-form-item>
      <el-form-item label="有无违法乱纪状态">
        <el-input v-model="detailInfo.isThereAnyViolationOfLawOrDiscipline" placeholder="请输入有无违法乱纪状态" class="el_inputW" />
      </el-form-item>
      <el-form-item label="有无重大病史">
        <el-input v-model="detailInfo.areThereAnyMajorMedicalHistories" placeholder="请输入有无重大病史" class="el_inputW" />
      </el-form-item>
      <p>通讯信息</p>
      <el-form-item label="QQ">
        <el-input v-model="detailInfo.qq" placeholder="请输入QQ" class="el_inputW" type="number" />
      </el-form-item>
      <el-form-item label="微信">
        <el-input v-model="detailInfo.wechat" placeholder="请输入微信号" class="el_inputW" />
      </el-form-item>
      <el-form-item label="现居住地">
        <el-input v-model="detailInfo.placeOfResidence" placeholder="请输入现居住地" class="el_inputW" />
      </el-form-item>
      <el-form-item label="通讯地址">
        <el-input v-model="detailInfo.postalAddress" placeholder="请输入通讯地址" class="el_inputW" />
      </el-form-item>
      <el-form-item label="联系手机">
        <el-input v-model="detailInfo.contactTheMobilePhone" placeholder="请输入联系手机" class="el_inputW" oninput="if(value.length>11)value=value.slice(0,11)" type="number" />
      </el-form-item>
      <el-form-item label="个人邮箱">
        <el-input v-model="detailInfo.personalMailbox" placeholder="请输入个人邮箱" class="el_inputW" />
      </el-form-item>
      <el-form-item label="紧急联系人">
        <el-input v-model="detailInfo.emergencyContact" placeholder="请输入紧急联系人" class="el_inputW" />
      </el-form-item>
      <el-form-item label="紧急联系电话">
        <el-input v-model="detailInfo.emergencyContactNumber" placeholder="请输入紧急联系电话" class="el_inputW" oninput="if(value.length>11)value=value.slice(0,11)" type="number" />
      </el-form-item>
      <p>账号信息</p>
      <el-form-item label="社保电脑号">
        <el-input v-model="detailInfo.socialSecurityComputerNumber" placeholder="请输入社保电脑号" class="el_inputW" />
      </el-form-item>
      <el-form-item label="公积金账号">
        <el-input v-model="detailInfo.providentFundAccount" placeholder="请输入公积金账号" class="el_inputW" />
      </el-form-item>
      <el-form-item label="银行卡号">
        <el-input v-model="detailInfo.bankCardNumber" placeholder="请输入银行卡号" class="el_inputW" />
      </el-form-item>
      <el-form-item label="开户行">
        <el-input v-model="detailInfo.openingBank" placeholder="请输入开户行" class="el_inputW" />
      </el-form-item>
      <p>教育信息</p>
      <el-form-item label="学历类型">
        <el-select v-model="detailInfo.educationalType">
          <el-option v-for="item of employees.educationType" :key="item.id" :label="item.value" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="毕业学校">
        <el-input v-model="detailInfo.graduateSchool" placeholder="请输入毕业学校" class="el_inputW" />
      </el-form-item>
      <el-form-item label="入学时间">
        <el-date-picker v-model="detailInfo.enrolmentTime" placeholder="请输入入学时间" class="el_inputW" />
      </el-form-item>
      <el-form-item label="毕业时间">
        <el-date-picker v-model="detailInfo.graduationTime" placeholder="请输入毕业时间" class="el_inputW" />
      </el-form-item>
      <el-form-item label="专业">
        <el-input v-model="detailInfo.major" placeholder="请输入专业" class="el_inputW" />
      </el-form-item>
      <p>从业信息</p>
      <el-form-item label="上家公司">
        <el-input v-model="detailInfo.homeCompany" placeholder="请输入上家公司" class="el_inputW" />
      </el-form-item>
      <el-form-item label="职称">
        <el-input v-model="detailInfo.title" placeholder="请输入职称" class="el_inputW" />
      </el-form-item>
      <el-form-item label="有无竞业限制">
        <el-radio v-model="detailInfo.isThereAnyCompetitionRestriction" label="1">有</el-radio>
        <el-radio v-model="detailInfo.isThereAnyCompetitionRestriction" label="2">无</el-radio>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入备注信息"
          class="el_inputW"
        />
      </el-form-item>
      <el-row style="margin-left:280px;">
        <el-button size="small" type="primary" :loading="saveLoading2" @click="saveUserInfo">保存更新</el-button>
        <el-button size="small" @click="$router.push({name: 'employees'})">返回</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import employees from '@/utils/employees'
import { getDetailInfo, saveDetailInfo, getPersonalInfo, savePersonalInfo } from '@/api/employee'
export default {
  name: 'DetailInfo',
  data() {
    return {
      employees,
      value: '',
      userId: this.$route.params.id,
      infoForm: {
        workNumber: '',
        timeOfEntry: '',
        username: '',
        departmentName: '',
        mobile: '',
        formOfEmployment: '',
        staffPhoto: ''
      },
      detailInfo: {
        userId: this.userId,
        username: '', // 用户名
        sex: '', // 性别
        mobile: '', // 手机
        companyId: '', // 公司id
        departmentName: '', // 部门名称
        //  onTheJobStatus: '', // 在职状态 no
        dateOfBirth: '', // 出生日期
        timeOfEntry: '', // 入职时间
        theHighestDegreeOfEducation: '', // 最高学历
        nationalArea: '', // 国家
        passportNo: '', // 护照号
        idNumber: '', // 身份证号
        idCardPhotoPositive: '', // 身份证照正
        idCardPhotoBack: '', // 身份证照正
        nativePlace: '', // 籍贯
        nation: '', // 民族
        englishName: '', // 英文名字
        maritalStatus: '', // 婚姻状况
        staffPhoto: '', // 员工照片
        birthday: '', // 生日
        zodiac: '', // 属相
        age: '', // 年龄
        constellation: '', // 星座
        bloodType: '', // 血型
        domicile: '', // 户籍所在地
        politicalOutlook: '', // 政治面貌
        timeToJoinTheParty: '', // 入党时间
        archivingOrganization: '', // 存档机构
        stateOfChildren: '', // 子女状态
        doChildrenHaveCommercialInsurance: '', // 保险状态
        isThereAnyViolationOfLawOrDiscipline: '', // 违法违纪状态
        areThereAnyMajorMedicalHistories: '', // 重大病史
        qq: '', // QQ
        wechat: '', // 微信
        residenceCardCity: '', // 居住证城市
        dateOfResidencePermit: '', // 居住证办理日期
        residencePermitDeadline: '', // 居住证截止日期
        placeOfResidence: '', // 现居住地
        postalAddress: '', // 通讯地址
        contactTheMobilePhone: '', // 联系手机
        personalMailbox: '', // 个人邮箱
        emergencyContact: '', // 紧急联系人
        emergencyContactNumber: '', // 紧急联系电话
        socialSecurityComputerNumber: '', // 社保电脑号
        providentFundAccount: '', // 公积金账号
        bankCardNumber: '', // 银行卡号
        openingBank: '', // 开户行
        educationalType: '', // 学历类型
        graduateSchool: '', // 毕业学校
        enrolmentTime: '', // 入学时间
        graduationTime: '', // 毕业时间
        major: '', // 专业
        graduationCertificate: '', // 毕业证书
        certificateOfAcademicDegree: '', // 学位证书
        homeCompany: '', // 上家公司
        title: '', // 职称
        resume: '', // 简历
        isThereAnyCompetitionRestriction: '', // 有无竞业限制
        proofOfDepartureOfFormerCompany: '', // 前公司离职证明
        remarks: '' // 备注
      },
      saveLoading: false,
      saveLoading2: false
    }
  },
  created() {
    this.getDetailInfo()
    this.getPersonalInfo()
  },
  methods: {
    // 获取员工基本信息
    async getDetailInfo() {
      this.infoForm = await getDetailInfo(this.userId)
      if (this.infoForm.staffPhoto.trim()) {
        // 将获取到的员工头像存储到fileList中
        this.$refs.staffPhoto.fileList = [{ url: this.infoForm.staffPhoto, upload: true }]
      }
    },
    // 保存员工基本信息
    async saveDetailInfo() {
      const fileList = this.$refs.staffPhoto.fileList
      // 查找fileList数组中是否有不存在upload字段的数据，有则是没有上传成功
      if (fileList.some(item => !item.upload)) {
        this.$message.warning('图片尚未保存成功，请稍后重试')
        return
      }
      await this.$refs.infoForm.validate()
      this.saveLoading = true
      await saveDetailInfo({ ...this.infoForm, staffPhoto: fileList && fileList.length ? fileList[0].url : ' ' })
      this.$store.dispatch('user/getUser')
      this.$message.success('基本信息保存成功')
      this.saveLoading = false
    },
    // 获取用户个人信息
    async getPersonalInfo() {
      this.detailInfo = await getPersonalInfo(this.userId)
      const staff = this.detailInfo.staffPhoto
      if (staff.trim()) {
        // 将获取到的员工头像存储到fileList中
        if (staff.split(',').length === 1) {
          this.$refs.photo.fileList = [{ url: staff, upload: true }]
        } else {
          const staffArr = staff.split(',')
          staffArr.forEach(item => {
            console.log(item)
            this.$refs.photo.fileList.push({ url: item, upload: true })
          })
        }
      }
    },
    // 保存用户个人信息
    async saveUserInfo() {
      const fileList = this.$refs.photo.fileList
      // 查找fileList数组中是否有不存在upload字段的数据，有则是没有上传成功
      if (fileList.some(item => !item.upload)) {
        this.$message.warning('图片尚未保存成功，请稍后重试')
        return
      }
      await this.$refs.userInfoForm.validate()
      this.saveLoading2 = true
      // 将fileList数组中的数据全部上传
      const urls = fileList.map(item => item.url).join(',')
      // console.log(urls.length)
      await savePersonalInfo({ ...this.detailInfo, staffPhoto: urls.length ? urls : ' ' })
      this.saveLoading2 = false
      this.$message.success('保存用户个人信息成功')
    }
  }
}
</script>

<style scoped lang="scss">

</style>
